<template>
  <div class="First"
       v-if="Form">
    <!-- 订单信息 -->
    <div class="items">
      <div class="title">订单信息</div>
      <el-form ref="form"
               class="form"
               :model="Form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="订单状态">
          <el-tag :type="Form.last_status | statusFilter">
            {{Form.last_status_f}}
          </el-tag>
        </el-form-item>
        <el-form-item label="相关产品">
          <div class="clearfix">
            <img class="fl"
                 width="100"
                 height="100"
                 :src="formatImage(Form.product.cover_image)">
            <div class="fl pl-20">
              <div class="font-bold text-black">{{Form.order_name}}</div>
              <div>规格：{{Form.product.specs_name}}</div>
              <div>单价：¥{{Form.unit_price/100}}&emsp;&emsp;数量：{{Form.number}}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="订单金额">
          <div>¥ {{ Form.order_price/100 }}</div>
        </el-form-item>
        <el-form-item label="优惠金额">
          <div>¥ {{ Form.discount_money/100 }}</div>
        </el-form-item>
        <el-form-item label="实付金额">
          <div>¥ {{ Form.recived_price/100 }}</div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 相关心愿 -->
    <div class="items"
         v-if="Form.order_type!='self_support'">
      <div class="title">相关心愿</div>
      <el-form ref="form"
               class="form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="心愿编号">
          <div>{{ Form.wish_id }}</div>
        </el-form-item>
        <el-form-item label="买家名称">
          <div>{{ Form.customer.nickname || Form.customer.customer_id  }}</div>
        </el-form-item>
        <el-form-item label="联系方式">
          <div>{{ Form.customer.phone}}</div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 收货信息 -->
    <div class="items">
      <div class="title">收货信息</div>
      <el-form ref="form"
               class="form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="收货人">
          <div>{{ Form.customer_address.name }}</div>
        </el-form-item>
        <el-form-item label="联系方式">
          <div>{{ Form.customer_address.phone }}</div>
        </el-form-item>
        <el-form-item label="收货地址">
          <div v-if="Form.customer_address['province']">{{ Form.customer_address.province.province_name }}-{{ Form.customer_address.city.city_name }}-{{ Form.customer_address.area.area_name }}&emsp;{{ Form.customer_address.detail }}</div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 其他信息 -->
    <div class="items">
      <div class="title">其他信息</div>
      <el-form ref="form"
               class="form"
               label-width="80px"
               label-position="left"
               size="mini">
        <el-form-item label="订单编号">
          <div>{{ Form.id }}</div>
        </el-form-item>
        <el-form-item label="交易号">
          <div>{{ Form.pay_data && JSON.parse(Form.pay_data).trade_no }}</div>
        </el-form-item>
        <el-form-item label="交易方式">
          <div>{{ Form.pay_way}}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    Data: {
      type: Object,
      default: null,
    },
  },
  filters: {
    statusFilter(status) {
      //all 所有 0待支付 10待发货 20待收货 30待评价 40交易成功 50交易失败  60订单取消
      const statusMap = {
        0: '',
        10: 'primary',
        20: 'success',
        30: 'info',
        40: 'success',
        50: 'danger',
        60: 'warning',
      }
      return statusMap[status]
    },
  },
  computed: {
    Form() {
      return this.Data
    },
  },
  data() {
    return {
      dialogBuyVisible: false,
      dialogLogisticsVisible: false,
    }
  },
  methods: {},
}
</script>
<style lang='scss'>
.First {
  padding: 10px 20px;
  .title {
    line-height: 60px;
    font-weight: bold;
    padding: 0 20px;
  }
  .form {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 0 20px;
    color: #666;
  }
}
</style>
